<template>
	<view class="content-bg">
		<view class="pad-30">
			<view class="pad-30 bg_color_fff radius10">
				<view class="font-32 text-center">{{info.title}}</view>
				<view class="betweenX pad-70">
					<view class="text-center">
						<view class="time">{{info.txamination_time}}分钟</view>
						<view class="color-main font-26 mar-top-20">建议用时</view>
					</view>
					<view class="text-center">
						<view class="time">{{info.total_score}}分</view>
						<view class="color-main font-26 mar-top-20">试卷总分</view>
					</view>
				</view>
				<up-line></up-line>
				<view class="centerXY flex mar-top-50">
					<view>试题难度：</view>
					<up-rate :minCount="5" v-model="info.difficulty" readonly></up-rate>
				</view>
				<view @click="hanldeStartAnswer" class="button-style">开始做题</view>
			</view>
		</view>

		<!-- 备注 -->
		<view class="pad-30 font-26 color-main">
			<view class="mar-top-20">题型介绍：</view>
			<view class="mar-top-20">1.单选题（选项中只有1个正确答案)；</view>
			<view class="mar-top-20">2.多选题（选项中至少有2个正确答案)；</view>
			<view class="mar-top-20">3.判断题（选项中只有1个正确答案)。</view>
		</view>

		<view class="pad-30 font-26 color-main">
			<view class="mar-top-20">考前必读：</view>
			<view class="mar-top-20">1.答题者准备好后，可点击“开始做题”按钮开始考试；</view>
			<view class="mar-top-20">2.做题前可看题目前的标签，明白此题是单选题、多选题还是判断题；</view>
			<view class="mar-top-20">3.作答完所有的题目点击“提交考试”按钮，即可查看自己的考试结果。</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 接口引入
	import {
		testInfo,
		startTest
	} from '/config/api.js';


	// 开始答题
	const hanldeStartAnswer = () => {
		uni.navigateTo({
			url: '/pages/answerStart/answerStart?id=' + info.value.id
		})
	}

	// 获取详情
	const info = ref('');
	const getInfoData = () => {
		testInfo({
			id: infoId.value
		}).then(res => {
			console.log(res.data);
			info.value = res.data;
		})
	}

	const infoId = ref('');
	onLoad((param) => {
		infoId.value = param.id;
		getInfoData();
	})
</script>

<style scoped lang="scss">
	page {
		background: #f5f5f5;
	}

	.button-style {
		background: #2c8eff;
		color: white;
		text-align: center;
		border-radius: 40rpx;
		line-height: 80rpx;
		margin-top: 50rpx;
	}

	.color-main {
		color: #999;
	}

	.time {
		color: #2c8eff;
		font-size: 50rpx;
	}
</style>